<div class="box" id="app-main-${menu.index}">

    <div class="table-options-box" style="display: flex; height: 100%; width: 100%; overflow: hidden; flex-direction: column;">
        <el-form class="zh-form" ref="refSearchForm" :model="formModelValue"
            :label-width="formconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
            style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
            <el-form-item v-for="(item, index) in formconfig.fieldList" :key="'form-item' + index" :label="item.label"
                :prop="item.prop" :label-width="item.labelWidth">
                <!-- 动态渲染表单项，这里以文本输入框为例 -->
                <el-input v-if="item.type === 'input'" v-model="formModelValue[item.prop]" placeholder="请输入"></el-input>
                <!-- 根据不同类型的item渲染不同的表单项 -->
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
                <el-button type="success" @click="() => openAddEditModal('add')">新增</el-button>
            </el-form-item>
        </el-form>


        <el-table ref="refTable" class="zh-el-table" :data="tableData" size="default"
            :height="tableConfig.height || '100%'" :highlight-current-row="tableConfig.highlightCurrentRow">

            <el-table-column v-if="tableConfig.hasSelection" type="selection" width="50" align="center"
                reserve-selection>
            </el-table-column>

            <el-table-column v-if="tableConfig.hasIndex" type="index" width="60" label="序号" align="center">
            </el-table-column>

            <el-table-column v-for="(item, index) in tableConfig.columns" :key="index"
                :width="item.width ? item.width : ''" :min-width="item.minWidth ? item.minWidth : ''"
                :align="item.align ? item.align : 'center'" :label="item.label" :prop="item.prop" :fixed="item.fixed"
                :sortable="item.sortable" :class-name="item.className">

            </el-table-column>

            <el-table-column v-if="tableConfig.actionColumn" :fixed="right" :width="tableConfig.actionColumn?.width"
                :min-width="tableConfig.actionColumn?.minWidth" :label="tableConfig.actionColumn?.label" :align="
          tableConfig.actionColumn?.align
              ? tableConfig.actionColumn.align
              : 'center'
          ">
                <template #default="scope">
                    <el-button v-if="tableConfig.actionColumn?.hasRowEditAction" link type="primary" size="small"
                        :icon="Edit" @click="() => openAddEditModal('edit', scope.row)">编辑</el-button>
                    <el-button v-if="tableConfig.actionColumn?.hasRowDeleteAction" link type="danger" size="small"
                        :icon="Delete" @click.stop="table.rowDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-dialog v-model="addEditModal.show" v-if="addEditModal.show" :title="addEditModal.title"
            :closeOnClickModal="false" :top="addEditModal.top" :append-to-body="true">

            <el-form class="zh-form" ref="refaddEditForm" :model="addEditFormModelValue"
                :label-width="addEditFormconfig.formLabelWidth || 'auto'" type="flex" inline justify="end"
                style="flex-wrap: wrap; flex-direction: row" :validate-on-rule-change="false">
                <el-form-item v-for="(item, index) in addEditFormconfig.fieldList" :key="'form-item' + index"
                    :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
                    <!-- 动态渲染表单项，这里以文本输入框为例 -->
                    <el-input v-if="item.type === 'input'" v-model="addEditFormModelValue[item.prop]"
                        placeholder="请输入"></el-input>
                    <!-- 根据不同类型的item渲染不同的表单项 -->
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addEditModal.cancel">取消</el-button>
                    <el-button type="primary" :loading="addEditModal.loadingSubmit"
                        @click="addEditModal.submit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>


</div>

<script type="module">
    (function () {
        const { createApp, ref, onMounted } = Vue;
        const vue3Composition1 = {
            setup() {
                // 搜索表单
                const refSearchForm = ref();

                const formModelValue = ref({
                    test: '',
                });

                const formconfig = ref({
                    fieldList: [
                        { prop: "test", label: "测试", type: "input", labelWidth: '80px' },
                        { prop: "test1", label: "测试1", type: "input", labelWidth: '80px' },
                    ],
                });

                const tableConfig = ref({
                    hasSelection: true,
                    hasIndex: true,
                    columns: [
                        { label: "角色", prop: "test", },
                        { label: "角色1", prop: "id", },
                        { label: "角色2", prop: "role2", },
                    ],

                    actionColumn: {
                        label: '操作',
                        hasRowEditAction: true,
                        hasRowDeleteAction: true,
                    }
                });

                const tableData = ref([
                        { test: 1, id: 111, test1: 100, test2: 200, test3: 300, test4: 400 },
                        { test: 1, id: 1112, test1: 100, test2: 200, test3: 300, test4: 400 },
                    ]
                );

                const addEditModal = ref({
                    show: false,
                    row: {},
                });

                const openAddEditModal = (type, row) => {
                    if (type == 'add') {
                        addEditModal.value.show = true;
                        addEditModal.value.title = '新增';
                    } else if (type == 'edit') {
                        addEditModal.value.title = '编辑';
                        addEditModal.value.show = true;
                        addEditModal.value.row = row;
                        addEditFormModelValue.value = { ...row };
                    }
                }

                // 搜索表单
                const refaddEditForm = ref();

                const addEditFormModelValue = ref({
                    test: '',
                });
                
                const addEditFormconfig = ref({
                    fieldList: [
                        { prop: "test", label: "测试", type: "input", labelWidth: '80px' },
                        { prop: "test1", label: "测试1", type: "input", labelWidth: '80px' },
                        { prop: "test2", label: "测试2", type: "input", labelWidth: '80px' },
                        { prop: "test3", label: "测试3", type: "input", labelWidth: '80px' }
                    ],
                });

                onMounted(async () => {
                    // 获取表头
                    const res = await fetchData('https://cloud.lugangwool.com/server/getkehuzdapi1.php?dbcl=',{ xgid: '544', dataviw: 'DataTable' }, {});
                    tableConfig.value.columns = res.map((x) => {
                        return {
                            label: x.title,
                            prop: x.field,
                            width: x.width
                        };
                    });

                    // 设置搜索配置项

                    // 设置新增、修改的配置

                    // 获取表格数据
                });

                return {
                    formconfig,
                    formModelValue,
                    tableConfig,
                    tableData,
                    addEditModal,
                    openAddEditModal,
                    refaddEditForm,
                    addEditFormModelValue,
                    addEditFormconfig
                };
            }
        };
        const app1 = createApp(vue3Composition1);
        app1.use(ElementPlus).mount("#app-main-${menu.index}");
        return app1;
    })();
</script>

<style>
    .table-options-box .zh-form {
        flex: 1;
    }
</style>